<template>
  <view class="pay-page" v-if="isWxBrowser() || true">
    <view class="amount">
      <view class="line">
        <text class="text">支付类型: </text>
        <text class="num">{{body}}</text>
      </view>
      <view class="line">
        <text class="text">用户ID: </text>
        <text class="num">{{user_id}}</text>
      </view>
      <view class="line">
        <text class="text">订单号: </text>
        <text class="num">{{sn}}</text>
      </view>
      <view class="line">
        <text class="text">支付金额: </text>
        <text class="num color">￥{{amount}}</text>
      </view>
    </view>
    <view class="button">
      <!--<u-button type="primary" text="确认支付" v-if="third_pay" @click="payThird"></u-button>-->
      <!--<u-button type="primary" text="确认支付" v-else @click="pay"></u-button>-->
      <u-button type="primary" text="正在支付中..."></u-button>
    </view>
  </view>
</template>

<script>
import base64 from '../../util/base64'
import Pay from '../../api/pay'
const payModel = new Pay()

export default {
  data() {
    return {
      sn: '',
      amount: 0,
      user_id: 0,
      third_pay: false,
      replace: '&replace=1',
      serial: '',
      body: '购买商品'
    }
  },
  methods: {

    /**
     * 支付设置地地址
     * http://xxx.com/sub_main/pay/index/
     */

    // 这是微信jsapi支付
    pay() {
      const domain = window.location.origin
      // openid redirect params
      // const redirect = base64.encode(this.$route.path + this.serial)
      const redirect = base64.encode(this.$route.path + `?serial=${this.serial}`)
      payModel._getOpenidH5({
        user_id: this.user_id,
        redirect_url: domain + '/sub_common/user/openid?redirect=' + redirect,
      }).then(response => {
        const { data } = response
        // test
        // data.openid = 'o6Tz06gkdIhSraSvzg9LeT7Hm3_U'
        // data.openid = 'o6Tz06gkdIhSraSvzg9LeT7Hm3_U'
        if (!data.openid) {
          window.location = data.url
        } else {
          payModel.payPrepareWxH5({
            openid: data.openid,
            sn: this.sn,
            amount: this.amount,
            body: this.body,
            pay_type: 1,
            pay_type_text: '订单',
            user_id: this.user_id,
            signature_url: window.location.href,
          }).then(() => {
            uni.showToast({
              title: '支付成功',
              icon: 'none'
            })
            uni.switchTab({
              url: '/pages/center/index'
            })
          }).catch(err => {
            uni.switchTab({
              url: '/pages/index/index'
            })
          })
        }
      })
    },


    // 汇聚 jsapi支付
    payThird() {
      const domain = window.location.origin
      const redirect = base64.encode(this.$route.path + `?serial=${this.serial}`)
      payModel._getOpenidH5({
        user_id: this.user_id,
        redirect_url: domain + '/sub_common/user/openid?redirect=' + redirect,
      }).then(response => {
        const { data } = response
        // console.log(data)
        // return

        // test
        // data.openid = 'o6Tz06gkdIhSraSvzg9LeT7Hm3_U'
        // data.openid = 'o6Tz06gkdIhSraSvzg9LeT7Hm3_U'
        if (!data.openid) {
          window.location = data.url
        } else {
          payModel.payPrepareWx({
            openid: data.openid,
            sn: this.sn,
            amount: this.amount,
            body: this.body,
            pay_type: 1,
            pay_type_text: '订单',
            user_id: this.user_id,
            signature_url: window.location.href,
          }).then(() => {
            uni.showToast({
              title: '支付成功',
              icon: 'none'
            })
            setTimeout(() => {
              uni.switchTab({
                url: '/pages/center/index'
              })
            })
          }).catch(err => {
            uni.switchTab({
              url: '/pages/index/index'
            })
          })
        }
      })
    },

    // 汇聚快捷支付
    payThirdFast() {
      // const domain = window.location.origin
      // const redirect = base64.encode(this.$route.path + `?serial=${this.serial}`)
      // payModel._getOpenidH5({
      //   user_id: this.user_id,
      //   redirect_url: domain + '/sub_common/user/openid?redirect=' + redirect,
      // }).then(response => {
      //   const { data } = response
      //   // console.log(data)
      //   // return
      //
      //   // test
      //   // data.openid = 'o6Tz06gkdIhSraSvzg9LeT7Hm3_U'
      //   // data.openid = 'o6Tz06gkdIhSraSvzg9LeT7Hm3_U'
      //   if (!data.openid) {
      //     window.location = data.url
      //   } else {
      //     payModel.payPrepareWx({
      //       openid: data.openid,
      //       sn: this.sn,
      //       amount: this.amount,
      //       body: this.body,
      //       pay_type: 1,
      //       pay_type_text: '订单',
      //       user_id: this.user_id,
      //       signature_url: window.location.href,
      //     }).then(() => {
      //       uni.showToast({
      //         title: '支付成功',
      //         icon: 'none'
      //       })
      //       setTimeout(() => {
      //         uni.switchTab({
      //           url: '/pages/center/index'
      //         })
      //       })
      //     }).catch(err => {
      //       uni.switchTab({
      //         url: '/pages/index/index'
      //       })
      //     })
      //   }
      // })
      payModel.payPrepareFast({
        // openid: data.openid,
        sn: this.sn,
        amount: this.amount,
        body: this.body,
        pay_type: 1,
        pay_type_text: '订单',
        user_id: this.user_id,
        signature_url: window.location.href,
      }).then(() => {

      })
    },

    isWxBrowser() {
      const ua = navigator.userAgent.toLowerCase()
      return ua.indexOf('micromessenger') !== -1
    }

  },
  onLoad(options) {

    if (!this.isWxBrowser()) {
      // return uni.showToast({
      //   icon: 'none',
      //   title: '请在微信中打开'
      // })
    }

    // debug: wx ios browser
    const href = window.location.href
    const replace = this.replace
    if (href.indexOf(replace) <= -1) {
      window.location.replace(href + replace)
    }

    let serial = options.serial
    this.serial = serial
    serial = JSON.parse(serial)
    // console.log(serial)

    payModel.getPayAmount({ order_id: serial.order_id }).then(response => {
      let { data } = response
      data = base64.parse(data)
      // console.log(data)

      this.sn = data.sn
      this.amount = data.amount
      this.user_id = data.user_id
      this.third_pay = data.third_pay

      if (this.third_pay) {
        // this.payThird()
        this.payThirdFast()
      } else {
        this.pay()
      }

    })
  }
}
</script>

<style scoped lang="scss">
.pay-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 60px;
  .button {
    width: 80%;
    margin-top: 10px;
  }
  .amount {
    width: 80%;
    //background: black;
    .line {
      height: 30px;
      display: flex;
      font-size: 24rpx;
      align-items: center;
      .text {
        width: 120rpx;
        text-align: right;
      }
      .num {
        padding-left: 15px;
        flex: 1;
        //color: red;
        //font-size: 36rpx;
        &.color {
          color: red;
          font-size: 36rpx;
        }
      }
    }
  }
}
</style>
